<template>
    <view :style="{ '--color': color }">
        <navBar title="次卡购买" :bgColor="bgColor" :transparent="transparent" :color="navColor"></navBar>
        <image :src="headImg" mode="widthFix" class="rows"></image>

        <view class="Tab">
            <u-tabs
                :list="list1"
                @click="Tabclick"
                :scrollable="false"
                lineColor="#000"
                :current="current"
                :inactiveStyle="inactiveStyle"
                :activeStyle="activeStyle"
                :itemStyle="itemStyle"
                :lineHeight="2"
                :lineWidth="22"></u-tabs>
        </view>

        <view class="Crad" @click="toUrl(`cardDetails`)">
            <view class="Crad-Top">
                <view class="Store">
                    <view class="StoreBox" v-for="(item, index) in StoreImg" :key="index">
                        <image :src="item" mode="aspectFill" class="StoreImg"></image>
                    </view>
                </view>
                <text class="storeName">XX店铺适用</text>
                <view class="iconfont icon-a-zujian32 color_33 h7 m-left10"></view>
            </view>
            <view class="Crad-wrapper">
                <view class="flex-1 d-flex a-center m-right30">
                    <image :src="headImg" mode="aspectFill" class="warpper-box_logo"></image>
                    <view class="d-flex f-column">
                        <text class="ellipsis black size28">卡片名称卡片名卡片名称卡片名</text>
                        <text class="ellipsis_2 color_99 m-top8">
                            这儿是卡片的摘要说儿是卡片的摘这儿是卡片的摘要说儿是卡片的摘
                        </text>
                    </view>
                </view>
                <view class="d-flex f-column a-center">
                    <view class="transact">办理</view>
                    <text class="color_66 h6 m-top10">已售：99份</text>
                </view>
            </view>
        </view>

        <view class="Crad">
            <view class="Crad-Top">
                <view class="Store">
                    <view class="StoreBox" v-for="(item, index) in StoreImg" :key="index">
                        <image :src="item" mode="aspectFill" class="StoreImg"></image>
                    </view>
                </view>
                <text class="storeName">XX店铺适用</text>
                <view class="iconfont icon-a-zujian32 color_33 h7 m-left10"></view>
            </view>
            <view class="Crad-wrapper">
                <view class="flex-1 d-flex a-center m-right30">
                    <image :src="headImg" mode="aspectFill" class="warpper-box_logo"></image>
                    <view class="d-flex f-column">
                        <text class="ellipsis black size28">卡片名称卡片名卡片名称卡片名</text>
                        <text class="ellipsis_2 color_99 m-top8">
                            这儿是卡片的摘要说儿是卡片的摘这儿是卡片的摘要说儿是卡片的摘
                        </text>
                    </view>
                </view>
                <view class="d-flex f-column a-center">
                    <view class="transact">办理</view>
                    <text class="color_66 h6 m-top10">已售：99份</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data() {
            return {
                bgColor: 'transparent',
                transparent: false,
                navColor: 'white',
                headImg: 'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
                list1: [
                    {
                        name: '办卡'
                    },
                    {
                        name: '我的卡包'
                    }
                ],
                current: 0,
                StoreImg: [
                    'https://msraimgcdn.mogoie.com/6099/1691810360037.jpg',
                    'https://msraimgcdn.mogoie.com/6099/1691738405248.png',
                    'https://msraimgcdn.mogoie.com/6099/1701402213965.jpg'
                ]
            }
        },
        onShow() {
            this.current = 0
        },
        methods: {
            Tabclick(e) {
                this.current = e.index
                if (e.index == 1) return this.toUrl(`cardBag`)
            }
        },
        computed: {
            ...mapState(['color']),
            inactiveStyle() {
                return { fontSize: '28rpx', color: '#333333' }
            },
            activeStyle() {
                return { fontSize: '30rpx', color: '#000000' }
            },
            itemStyle() {
                return { height: '38px' }
            }
        },
        watch: {
            headImg: {
                immediate: true,
                handler(newVal) {
                    if (newVal) {
                        this.transparent = false
                        this.navColor = 'white'
                    } else {
                        this.transparent = true
                        this.navColor = 'black'
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background-color: #f2f2f2;
    }
    .Tab {
        width: 100%;
        margin: 0 auto;
        padding: 20rpx 70rpx;
    }
    .Crad {
        width: 690rpx;
        background-color: #ffffff;
        padding: 24rpx 24rpx 36rpx 24rpx;
        border-radius: 10rpx;
        margin: 0 auto 24rpx;
        &-Top {
            width: 100%;
            display: flex;
            align-items: center;
            .Store {
                display: flex;
                align-items: center;
                margin-right: 20rpx;
                .StoreBox {
                    width: 52rpx;
                    height: 52rpx;
                    background-color: #ffffff;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: relative;
                    margin-left: -26rpx;
                    .StoreImg {
                        width: 44rpx;
                        height: 44rpx;
                        border-radius: 50%;
                    }
                }
                .StoreBox:first-child {
                    margin-left: 0 !important;
                }
            }
            .storeName {
                color: #333;
                font-size: 26rpx;
            }
        }
        &-wrapper {
            width: 100%;
            display: flex;
            align-items: center;
            margin-top: 24rpx;
            .warpper-box_logo {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-right: 20rpx;
                flex-shrink: 0;
                display: block;
            }
            .transact {
                width: 154rpx;
                height: 62rpx;
                background-color: var(--color);
                border-radius: 10rpx;
                color: #fff;
                font-size: 28rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>
